<template>
	<view>
		<uni-header title="云算力" :backIcon="false"></uni-header>
		<view class="product" v-for="(item,index) in list" :key="index" @click="powerDetail(item.id)">
			<view class="top">
				<text>{{item.title}}</text>
				<view class="tags">
					<text>个人服务器</text>
					<text>单份算力·{{item.computingPower}}T</text>
				</view>
			</view>
			<view class="center">
				<view class="">
					<text class="yield">{{item.historyIncome}}</text>
					<text class="ts">历史收益率</text>
				</view>
				<view class="">
					<text class="yield black">{{item.lockPeriod}}</text>
					<text class="ts">锁定期</text>
				</view>
			</view>
			<view class="bottom">
				<text>{{item.startTime}}开挖</text>
				<text class="line"></text>
				<text>灵活便利</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import {productList} from '@/util/api.js'
import { onMounted, ref } from 'vue';
const page = ref(1)
const list = ref([])
onMounted(()=>{
	getList()
})
const getList = async ()=>{
	const result = await productList({limit:15,page:page.value})
	if(page.value==1){
		list.value = result.data.records
	}else{
		list.value = list.value.concat(result.data.records)
	}
}

const  powerDetail = (id)=>{
	const token = uni.getStorageSync('token')
	if(!token){
		uni.showModal({
			title:"提示",
			content:"检测到您还未登录，需要先去登录",
			success: (ret) => {
				if(ret.confirm){
					uni.navigateTo({
						url:"/pages/login/login"
					})
				}
			}
		})
	}else{
		uni.navigateTo({
			url:"/pages/powerDetail/powerDetail?id="+id
		})
	}
	
}

</script>

<style lang="scss" scoped>
	.product {
		width: 686rpx;
		// height: 284rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 10rpx auto 30rpx;
		position: relative;
		overflow: hidden;
		border-bottom: 2rpx solid #F2F4FA;
		padding-bottom: 40rpx;
		.top {
			display: flex;
			margin: 30rpx 0;
			align-items: center;
			>text {
				color: #181D29;
				font-size: 28rpx;
				font-weight: 500;
				margin-right: 30rpx;
			}

			.tags {
				display: flex;

				text {
					color: #1E53E7;
					font-size: 24rpx;
					height: 32rpx;
					padding: 0 10rpx;
					line-height: 32rpx;
					margin-right: 15rpx;
					border-radius: 4rpx;
					display: block;
					border: 2rpx solid rgba(30, 83, 231, 0.45);
				}
			}
		}

		.center {
			display: flex;
			// margin: 0 32rpx;
			view {
				display: flex;
				flex-direction: column;
				margin-right: 60rpx;
				align-items: flex-start;

				.yield {
					color: #F53B47;
					font-size: 48rpx;
					font-weight: 500;
				}

				.black {
					color: #181D29;
				}

				.yield::after {
					content: "%";
					font-size: 26rpx;
				}

				.black::after {
					content: "天";
					font-size: 26rpx;
				}

				.ts {
					color: #A3A7B2;
					font-size: 26rpx;
					display: block;
					margin-top: 0rpx;
				}
			}
		}

		.bottom {
			width: 622rpx;
			height: 44rpx;
			background: linear-gradient(90deg, #F4F6FC 0%, rgba(244, 246, 252, 0) 100%);
			border-radius: 4rpx;
			margin: 20rpx 0;
			display: flex;
			align-items: center;
			padding-left: 20rpx;

			text {
				color: #181D29;
				font-size: 24rpx;
				display: block;
			}

			.line {
				background: #A3A7B2;
				width: 2rpx;
				height: 20rpx;
				margin: 0 15rpx;
			}
		}

	}
</style>